// import { GoogleMap, Marker, withGoogleMap,withScriptjs } from "react-google-maps"
// import { PageContainer } from '@ant-design/pro-layout';

// const MyMapComponent = withScriptjs(withGoogleMap((props) =>
//   <GoogleMap
//     defaultZoom={12}
//     defaultCenter={{
//       lng: 114.35738432483673,
//       lat: 30.608313392810004,
//     }}
//   >
//     {props.isMarkerShown && <Marker position={{ lng: 114.35738432483673, lat: 30.608313392810004 }} />}
//   </GoogleMap>
// ))

// export default ()=>{
//   return (
//     <PageContainer>
//       <div style={{ width: 900, height: 600 }}>
//         <MyMapComponent isMarkerShown 
//             googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
//             loadingElement={<div style={{ height: `100%` }} />}
//             containerElement={<div style={{ height: `400px` }} />}
//             mapElement={<div style={{ height: `100%` }} />}
//         ></MyMapComponent>
//       </div>
//     </PageContainer>
//   )
// }


import { 
  Map, 
  APILoader, 
  Marker,
  ScaleControl, 
  ToolBarControl, 
  ControlBarControl, 
  Geolocation 
} from '@uiw/react-amap';
import React from 'react';

const Demo = () => (
  <div style={{ width: '1000px', height: '600px' }}>
    <Map
      center={[114.35738432483673, 30.608313392810004]} zoom={18}
    >
      <ScaleControl offset={[16, 30]} position="LB" />
      <ToolBarControl offset={[16, 10]} position="RB" />
      <ControlBarControl offset={[16, 180]} position="RB" />
      <Geolocation
        maximumAge={100000}
        borderRadius="5px"
        position="RB"
        offset={[16, 80]}
        zoomToAccuracy={true}
        showCircle={true}
      />
      <Marker visiable={true} title="北京市" position={new AMap.LngLat(114.35738432483673, 30.608313392810004)} />
    </Map>
  </div>
);

export default ()=>{
  return( 
    <APILoader akay="c36700228ab854ce91c7226f41427904">
      <Demo></Demo>
    </APILoader>
  )
}



// import { Descriptions, Space } from 'antd';

// export default ()=>{
//   return( 
//   <Descriptions title="User Info">
//     <Space direction='vertical'>
//       <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
//       <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
//       <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
//       <Descriptions.Item label="Remark">empty</Descriptions.Item>
//       <Descriptions.Item label="Address">
//         No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
//       </Descriptions.Item>
//     </Space>
//   </Descriptions>
//   )
// }


// import React from 'react';
// import ProDescriptions from '@ant-design/pro-descriptions';

// export default class TrailerDescription extends React.Component {
//   constructor(props) {
//     // 组件间传值：父向子组件传值，子向父组件传值，兄弟组件之间传值
//     // 父向子组件传值：子组件通过props直接访问需要传递的值
//     // 子向父组件传值：子组件通过props访问父组件的函数
//     // 兄弟组件之间传值：子组件1先向父组件传值，父组件再向子组件2传值
//     super(props);
//     // 类组件的成员变量，一般用于存放逻辑控制相关的各种Tag，和各种本地配置
//     // 建议在构造函数中对成员变量进行初始化。
//     this.columns = [
//       {
//         title: 'ID',
//         // key: 'text',
//         dataIndex: 'trailer_ID',
//       },
//       {
//         title: '状态',
//         key: 'state',
//         dataIndex: 'state',
//         valueType: 'select',
//         valueEnum: {
//           all: { text: '全部', status: 'Default' },
//           1: {
//             text: '在线',
//             status: 'Success',
//           },
//           2: {
//             text: '离线',
//             status: 'Processing',
//           },
//           0: {
//             text: '断线',
//             status: 'Error',
//           },
//         },
//       },
//       {
//         title: '正在执行的指令',
//         dataIndex: 'command',
//       },
//       {
//         title: '开始时刻',
//         dataIndex: 'start_time',
//       },
//       {
//         title: '在线时长',
//         dataIndex: 'total_time',
//       },
//     ];
//     const trailerObj=(this.props.trailerObj||{
//       trailer_ID: "1",
//       state: "1",
//       command: "1",
//       start_time: "1",
//       total_time: "1",
//     });
//     console.log(trailerObj);
//     this.state = {trailerObj}
//     // this.setState({...trailerObj});
//     // this.setState({x: trailerObj.trailer_ID});
//     console.log(this.state);
//   }
    
//   render(){
//     return (

//         <ProDescriptions
//           title="拖车详情"
//           // style={{ width: 150, height: 600 }}
//           column={1}
//           dataSource={{
//             trailer_ID: this.state.trailerObj.trailer_ID,
//             state: this.state.trailerObj.state,
//             command: this.state.trailerObj.command,
//             start_time: this.state.trailerObj.start_time,
//             total_time: this.state.trailerObj.total_time,
//           }}
//           columns={this.columns}
//         >
//         </ProDescriptions>

//     );
//   }
// }


// import { Map, Marker } from 'react-amap';
// import React from 'react';

// export default class App extends React.Component{
//   constructor(){
//     super();
//     this.state = {
//       visible: true,
//       position: {longitude: 120, latitude: 35 },
//       clickable: true,
//       draggable: true,
//     };
//     this.mapPlugins = ['ToolBar'];
//     this.markerEvents = {
//       click: () => {
//         console.log('marker clicked!')
//       }
//     }
//   }
  
//   toggleVisible() {
//     this.setState({
//       visible: !this.state.visible,
//     });
//   }
  
//   randomPosition(){
//     this.setState({
//       position: { 
//         longitude: 120 + Math.random() * 10 , 
//         latitude: 35 + Math.random() * 10 
//       }
//     });
//   }
  
//   toggleClickable() {
//     this.setState({
//       clickable: !this.state.clickable,
//     });
//   }
  
//   toggleDraggable() {
//     this.setState({
//       draggable: !this.state.draggable,
//     });
//   }
  
//   render(){   
//     return <div>
//       <div style={{width: '100%', height: 360}}>
//         <Map 
//           // plugins={this.mapPlugins} 
//           center={this.state.position} zoom={6}>
//           <Marker
//             // events={this.markerEvents}
//             position={this.state.position} 
//             // visible={this.state.visible}
//             // clickable={this.state.clickable}
//             draggable={this.state.draggable}
//           />
//           <Marker position={
//                     {
//                       longitude: 114.35738432483673,
//                       latitude: 30.608313392810004,
//                     }
//                   }/>
//         </Map>
//       </div>
//       <button onClick={() => {this.toggleVisible() }}>Visible</button>
//       <button onClick={() => {this.randomPosition() }}>Position</button>
//       <button onClick={() => {this.toggleClickable() }}>Clickable</button>
//       <button onClick={() => {this.toggleDraggable() }}>Draggable</button>
//     </div>
//   }
// }